/******************************************************************************************
 * Import
 ******************************************************************************************/


// module
import Taro, { Component } from '@tarojs/taro';
import { Swiper } from '@tarojs/components';

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Toast} from '../../../library/func';
import Icon from '../../../project/style/icon';
import Http from '../../../project/func/http/http';
import '../../../library/style/patch.css';
import Util from '../../../project/func/util';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class DesTop extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
        super(props);

		this.state = {
		}
    }

    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
 
        // 渲染
		return (

			<CColumn mt='6' mb='10'>
				<CBetween x="center" y="center" py="20" bg='#fff' class='w1' style='display:flex;'>
					<CHand w='120' x="center" h="190" px='15' mr='15' df oh>
						<CImage 
							mode='scaleToFill'
							style='width:100%;'
							h='190'
							src={ this.props.data.object.set_cover }
						/>
					</CHand>
					<CHand class='f1' h="190" pl='10' pr='20'>
						<CItemY class='w1' x='left'>
							<CHand h="35" y="center">
								<CSvg w='16' h='16' color='#727272' icon={Icon.time}></CSvg>
								<CHand color="#2e2e2e" lh="35" ml="6" size="13">{ Util.formatTime(this.props.data.time_start,'M/D h:m') }-{ Util.formatTime(this.props.data.time_end,'M/D h:m') }</CHand>
							</CHand>
							<CHand h="35" y="center">
								<CSvg w='20' h='20' color='#727272' icon={Icon.address} ml='-2'></CSvg>
								<CHand color="#2e2e2e" lh="35" ml="6" size="14">{ this.props.data.set_address }</CHand>
							</CHand>
							<CHand h="35" y="center">
								<CSvg w='16' h='16' color='#727272' icon={Icon.goldc}></CSvg>
								<CHand color="#2e2e2e" lh="35" ml="6" size="14">{ this.props.data.set_cost == 0 ? '免费' : this.props.data.set_cost+"元" }</CHand>
							</CHand>
							<CHand h="35" y="center">
								<CSvg w='21' h='21' color='#727272' icon={Icon.minetwo} ml="-2"></CSvg>
								<CHand color="#2e2e2e" lh="35" ml="6" size="13">仅限{ this.props.data.set_limit }人参与</CHand>
							</CHand>

							<CHand h="50" y="center">
								<CSvg w='25' h='25' color='#727272' icon={Icon.mostpeople} ml="-2"></CSvg>
								<CHand color="#C3A73A" lh="50" ml="6" size="18">{ this.props.data.count_apply }人</CHand>
								<CHand color="#707070" lh="50" ml="12" size="18">|</CHand>
								{
									this.props.data.set_limit>=this.props.data.count_apply ? 
									Math.round(new Date() / 1000)  > this.props.data.time_end ?
									<CHand color="#666" lh="50" ml="10" size="16" bold>已截止</CHand>
									:
									<CHand color="#C3A73A" lh="50" ml="10" size="16" bold>报名中</CHand>
									 : 
									 <CHand color="#949494" lh="50" ml="10" size="16" bold>已结束</CHand>
								}
								
							</CHand>
						</CItemY>
					</CHand>
				</CBetween>


				<CHand class='w1' bg="#fff" x="center" px='20'>
					<CHand class='w1'>
						<CHand class="w1" lh="22" size="17" bold color="#494949">{ this.props.data.set_title }</CHand>
					</CHand>
				</CHand>
				<CHand bg="#fff" x="center" pt="10" px='20' pb="10" class='w1'>
					<CHand class='f1'>
						<CHand lh="20" size="12" color="#7d7d7d">浏览{ this.props.data.count_visit }次</CHand>
						{/* <CHand ml="10" lh="20" size="12" color="#7d7d7d">收藏100次</CHand> */}
					</CHand>
				</CHand>

			</CColumn>

		);
	}
}
